<template>
	<view class="content">
		<view class="post-card-list">
			<view class="account-info-card">
				<!-- 用户信息 -->
				<view class="account-info svip">
					<!-- 用户头像 -->
					<view class="account-head" >
						<!-- 头像图片容器 -->
						<view class="account-head-img">
							<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
						<!--头像帽子 训：hat-admin｜鉴赏家：hat-appreciation｜坏人：hat-badman｜美女：hat-beautiful｜皇冠：hat-crown｜女生翅膀：hat-girlWing -->
						<icon type="" class="account-hat hat-appreciation"></icon>
					</view>
					<!-- 文字和图标信息 -->
					<view class="account-info-content">
						<!-- 基础信息 -->
						<view class="base-info">
							<text class="account-nickName">用户名甲乙丙丁戊己</text>
							<view class="account-level"><text>999</text></view>
							<!-- 男性 -->
							<icon type="" class="imgIcon icon-male"></icon>
						</view>
						<!-- 附加信息 -->
						<view class="plus-info">
							<!-- VIP铭牌 -->
							<text class="account-nameplate">22</text>
							<!-- SVIP铭牌 -->
							<!-- <text class="account-nameplate">22</text> -->
							<!-- 店铺 -->
							<icon type="" class="imgIcon icon-store"></icon>
							<!-- 品牌 -->
							<icon type="" class="imgIcon icon-brand"></icon>
							<!-- 认证 -->
							<icon type="" class="imgIcon icon-tobacco"></icon>
							<!-- 鉴赏家 -->
							<icon type="" class="imgIcon icon-evaluation"></icon>
						</view>
						<!-- 账号 -->
						<text class="account-id">账号: Rafael González</text>
						<!-- 邀请码 -->
						<view class="wrap-invitation">
							<text class="invitation-id">邀请码: 798ABC</text>
							<button class="btn-copy">复制</button>
						</view>
					</view>
					<!-- 功能 -->
					<view class="post-head-actions">
						<!-- 商店账户 -->
						<icon type="" @click="" class="fontIcon icon-user-store red-icon"></icon>
						<!-- 二维码 -->
						<icon type="" @click="" class="fontIcon icon-QRCode"></icon>
						<!-- 设置 -->
						<icon type="" @click="" class="fontIcon icon-setting"></icon>
						<!-- 菜单 -->
						<icon type="" @click="" class="fontIcon icon-more"></icon>
					</view>
				</view>
				<!-- 数据列表 -->
				<view class="account-data-info">
					<view class="score-data-list">
						<view class="list-item">
							<text class="score-number">120</text>
							帖子
						</view>
						<view class="list-item">
							<text class="score-number">4</text>
							关注
						</view>
						<view class="list-item">
							<text class="score-number">2014</text>
							粉丝
						</view>
						<view class="list-item">
							<text class="score-number">1.2W</text>
							积分
						</view>
					</view>
					<view class="other-data-list">
						<view class="list-item">
							获赞数：<text class="other-number">3.7W</text>
						</view>
						<view class="list-item">
							获赏数：<text class="other-number">2.1W</text>
						</view>
						<view class="list-item">
							<icon type="" class="imgIcon icon-bean"></icon>
							灰豆数：<text class="bean-number">1.2W</text>
						</view>
					</view>
				</view>
				<view class="account-function">
					<button class="common-btn btn-normal">
						<icon type="" class="fontIcon icon-focus"></icon>
						关注
					</button>
					<button class="common-btn btn-important">
						<icon type="" class="fontIcon icon-private-chat"></icon>
						私信
					</button>
				</view>
				<!-- vip查看 -->
				<view class="goto-vip-bar">
					<text class="bar-title">开通VIP</text>
					<view class="btn-goto-vip">
						开通
						<icon type="" class="fontIcon icon-goto"></icon>
					</view>
				</view>
				<!-- vip -->
				<view class="goto-vip-bar vip">
					<text class="bar-title">2022.8.25到期</text>
					<view class="btn-goto-vip">
						查看
						<icon type="" class="fontIcon icon-goto"></icon>
					</view>
				</view>
				<!-- svip -->
				<view class="goto-vip-bar svip">
					<text class="bar-title expired">已到期</text>
					<view class="btn-goto-vip">
						续费
						<icon type="" class="fontIcon icon-goto"></icon>
					</view>
				</view>
			</view>
			<!-- 雪茄收藏夹 -->
			<view class="favorite-cigar-slider">
				<view class="slider-title">收藏雪茄数：<text class="focus-text">122</text></view>
				<view class="rotate-slider">
					<view class="list-item">
						<view class="cigar-photo">
							<image src="../../static/temp-cigar-photo-3.png" mode="widthFix"></image>
						</view>
						<view class="cigar-en-name">Cohiba Piramides Extra Cohiba Piramides Extra Piramides Extra Cohiba Piramides Extra</view>
						<view class="cigar-cn-name">2021年 桑丘西班牙地区限量-特级金字塔</view>
						<view class="time-info">- 2020-06-19 09:44:49 -</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 帖子排序 -->
		<view class="list-sort-bar posts-sort">
			<button class="sort-button selected">全部</button>
			<button class="sort-button">文章</button>
			<button class="sort-button">精华</button>
			<button class="sort-button">悬赏</button>
			<button class="sort-button">视频</button>
		</view>
		<!-- 搜索栏 -->
		<view class="search-bar">
			<input class="search-input" focus placeholder="点击搜索用户帖子" />
		</view>
		<!-- 帖子列表 -->
		<view class="post-card-list">
			<view class="post-card">
				<!-- 贴标签 -->
				<view class="post-tag-list">
					<!-- 此处仅仅是演示，极限情况不会超过4个 -->
					<icon type="" class="imgTag post-tag tag-same-city"></icon>
					<icon type="" class="imgTag post-tag tag-hold-top"></icon>
					<icon type="" class="imgTag post-tag tag-recommend"></icon>
					<icon type="" class="imgTag post-tag tag-marrow"></icon>
					<icon type="" class="imgTag post-tag tag-excellent"></icon>
					<icon type="" class="imgTag post-tag tag-beginner"></icon>
				</view>
				<!-- 帖子内容 -->
				<view class="post-content">
					<view class="time-info">
						<text>2019-11-12 10:21:10</text>
					</view>
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
					<image @click="" src="../../static/temp-photo.jpg" mode="widthFix" class="full-img"></image>

				</view>
				<text class="content-address">中国北京西长安街13号</text>
				<text class="post-wrong-tip">
					雪茄文化交流，吸烟有害健康，未成年人禁入!
				</text>
				<view class="post-bottom-bar">
					<button class="post-share-btn" @click="">转发</button>
					<button class="post-comment-btn" @click="">评论</button>
					<button class="post-thumbs-btn" @click="">点赞</button>
				</view>
			</view>
			<view class="post-card">
				<!-- 贴标签 -->
				<view class="post-tag-list">
					<!-- 此处仅仅是演示，极限情况不会超过4个 -->
					<icon type="" class="imgTag post-tag tag-same-city"></icon>
					<icon type="" class="imgTag post-tag tag-hold-top"></icon>
					<icon type="" class="imgTag post-tag tag-recommend"></icon>
					<icon type="" class="imgTag post-tag tag-marrow"></icon>
					<icon type="" class="imgTag post-tag tag-excellent"></icon>
					<icon type="" class="imgTag post-tag tag-beginner"></icon>
				</view>
				<!-- 帖子内容 -->
				<view class="post-content">
					<view class="time-info">
						<text>2019-11-12 10:21:10</text>
					</view>
					<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，<icon type="" class="imgIcon icon-store"/>依赖 display属性 + position属性 + float属性。
					它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
				</view>
				<text class="content-address">中国北京西长安街13号</text>
				<text class="post-wrong-tip">
					雪茄文化交流，吸烟有害健康，未成年人禁入!
				</text>
				<view class="post-bottom-bar">
					<button class="post-share-btn" @click="">转发</button>
					<button class="post-comment-btn" @click="">评论</button>
					<button class="post-thumbs-btn" @click="">点赞</button>
				</view>
			</view>
		</view>
		<view class="user-home-function-list">
			<view class="user-home-function-btn">
				<icon type="" class="fontIcon icon-thumbs"></icon>
				<text>我的赞</text>
			</view>
			<view class="user-home-function-btn">
				<icon type="" class="fontIcon icon-collect"></icon>
				<text>我的收藏</text>
			</view>
			<view class="user-home-function-btn">
				<icon type="" class="fontIcon icon-reward"></icon>
				<text>我的打赏</text>
			</view>
			<view class="user-home-function-btn">
				<icon type="" class="fontIcon icon-video"></icon>
				<text>我的视频</text>
			</view>
			<view class="user-home-function-btn">
				<icon type="" class="fontIcon icon-bounty"></icon>
				<text>我的悬赏</text>
			</view>
			<view class="full-bar">
				<view class="user-home-function-btn">
					<icon type="" class="imgIcon icon-bounty-store"></icon>
					<text>悬赏专区</text>
				</view>
				<view class="user-home-function-btn">
					<icon type="" class="imgIcon icon-score-store"></icon>
					<text>积分商城</text>
				</view>
			</view>
		</view>
		<!-- 功能列表 -->
		<view class="control-list">
			<view class="list-item">
				<icon class="fontIcon icon-redDot" type=""></icon>
				<text class="item-name">帖子互动消息</text>
				<view class="item-info"></view>
				<icon class="fontIcon icon-goto" type=""></icon>
			</view>
			<view class="list-item">
				<icon class="fontIcon icon-redDot imgIcon-hide" type=""></icon>
				<text class="item-name">聊天消息</text>
				<view class="item-info"></view>
				<icon class="fontIcon icon-goto" type=""></icon>
			</view>
			<view class="list-item">
				<icon class="fontIcon icon-redDot imgIcon-hide" type=""></icon>
				<text class="item-name">我的申请</text>
				<view class="item-info"></view>
				<icon class="fontIcon icon-goto" type=""></icon>
			</view>
			<view class="list-item">
				<icon class="fontIcon icon-redDot imgIcon-hide" type=""></icon>
				<text class="item-name">邀请的好友</text>
				<view class="item-info"></view>
				<icon class="fontIcon icon-goto" type=""></icon>
			</view>
			<view class="list-item">
				<icon class="fontIcon icon-redDot imgIcon-hide" type=""></icon>
				<text class="item-name">雪茄爱好</text>
				<view class="item-info"></view>
				<icon class="fontIcon icon-goto" type=""></icon>
			</view>
			<view class="list-item">
				<icon class="fontIcon icon-redDot imgIcon-hide" type=""></icon>
				<text class="item-name">联系客服</text>
				<view class="item-info"></view>
				<icon class="fontIcon icon-goto" type=""></icon>
			</view>
			<view class="list-item">
				<icon class="fontIcon icon-redDot imgIcon-hide" type=""></icon>
				<text class="item-name">鉴赏家</text>
				<view class="item-info"></view>
				<icon class="fontIcon icon-goto" type=""></icon>
			</view>
			<view class="list-item">
				<icon class="fontIcon icon-redDot imgIcon-hide" type=""></icon>
				<text class="item-name">我的举报</text>
				<view class="item-info"></view>
				<icon class="fontIcon icon-goto" type=""></icon>
			</view>
		</view>
		<!-- 私聊按钮 -->
		<button class="float-btn private-chat-btn"></button>
	</view>
</template>